<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.js"></script>
    <script src="./js/hookEcharts.js"></script>
</head>

<body>
    <div class="main">
        <div class="head">
            <div class="head-left">智慧园区可视化平台</div>
            <ul class="head-content">
                <li> <a href="">营区态势</a></li>
                <li><a href="">出入管理</a></li>
                <li> <a href="">监控点位</a></li>
                <li> <a href="">能耗管理</a></li>
                <li> <a href="">配置中心</a></li>
            </ul>
            <div class="head-right">
                <div class="head-right-time">2022-5-20&nbsp;20:05</div>
                <div class="head-right-photo">
                    <a href="" class="head-right-a1"><img src="./images/m1.png" alt=""></a>
                    <a href="" class="head-right-admin">Admin</a>
                    <a href="" class="head-right-a2"><img src="./images/m2.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="left1">
                <div class="left1-top">
                    <div class="left1-top-left">
                        <div class="introduce">当日能耗</div><span>Kwh</span>
                    </div>
                    <div class="left1-top-right">
                        <div class="con-wrap">
                            <div class="num1">
                                <span>4</span>
                            </div>
                            <div class="num2">
                                <span>8</span>
                            </div>
                            <div class="num3">
                                <span>7</span>
                            </div>
                            <div class="num4">
                                <span>3</span>
                            </div>
                            <div class="num5">
                                <span>0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left1-bottom"></div>
            </div>
            <div class="left2">
                <div class="left2-top">
                    <div class="introduce">小时用能变化</div>
                    <div class="lvkuang">
                        <div class="dian">电</div>
                        <div class="shui">水</div>
                    </div>
                </div>
                <div class="left2-bottom">
                    <div id="zhexian1"></div>
                </div>
            </div>
            <div class="left3">
                <div class="left3-top">
                    <div class="introduce">日用能趋势</div>
                    <div class="lvkuang">
                        <div class="dian">电</div>
                        <div class="shui">水</div>
                    </div>
                </div>
                <div class="left3-bottom">
                    <div id="zhuzhuang1"></div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-top">
                <div class="right-top-left">
                    <div class="right-top-left-content">
                        <div class="right-top-left1">平均日用量</div>
                        <div class="right-top-left2">6,876</div>
                        <div class="right-top-left3">Kwh</div>
                        <div class="right-top-left4">按吨日用量&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; 环比变化</div>
                        <div class="r2">
                            <div class="r2-1">2802</div>
                            <div class="r2-2">-1%</div>
                        </div>
                    </div>
                </div>
                <div class="right-top-middle">

                </div>
                <div class="right-top-right">
                    <!-- <div class="item1">
                        <div class="chip">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <img src="./images/chip.svg" alt="">
                        </div>
                        <span class="count">273</span>
                        <span class="count-text">主变台数</span>
                        <span class="count-text">(台)</span>
                    </div>
                    <div class="item1">
                        <div class="chip">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <img src="./images/luyou.svg" alt="">
                        </div>
                        <span class="count">50,170</span>
                        <span class="count-text">计量台数</span>
                        <span class="count-text">(个)</span>
                    </div>
                    <div class="item1">
                        <div class="chip">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <img src="./images/meter.svg" alt="">
                        </div>
                        <span class="count">101</span>
                        <span class="count-text">网关数量</span>
                        <span class="count-text">(个)</span>
                    </div> -->
                </div>
            </div>
            <div class="rignt-middle">
                <div class="right-middle-left">
                    <div class="right-middle-left-top">用能分析</div>
                    <div class="right-middle-left-bottom" id="yuanhuan"></div>
                </div>
                <div class="right-middle-right">
                    <div class="right-middle-left-top">重点关注点位</div>
                    <div class="right-middle-right-middle">
                        <div class="qianmianzi">照明系统用电(Kwh)</div>
                        <div class="houmianzi">空调系统用电(Kwh)</div>
                        <div class="shuzilv">45,313 <span class="shuzihuang">24,101</span></div>

                    </div>
                    <div class="right-middle-right-bottom" id="zhezhu">

                    </div>
                </div>
            </div>
            <div class="right-bottom">
                <div class="right-bottom-top">地点能耗情况</div>
                <div class="right-bottom-middle">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                    <div class="line4"></div>
                    <div class="line5"></div>
                    <div class="line6"></div>
                </div>
                <div class="right-bottom-bottom">
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="main-b">
                        <div class="top"></div>
                        <div class="bottom">
                            <div class="bottom-left" style="float: left;">
                                <span style="color: white;">一号楼</span>
                            </div>
                            <div class="bottom-right" style="float: left;">
                                <table style="color: white;float: left;border-collapse: collapse">
                                    <tr>
                                        <td>最大值</td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>
                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //数字滚动
        var num5 = document.querySelector('.num5');
        var num = 0;
        // 定时器 间歇定时器
        setInterval(function() {
            var spanOld = document.querySelectorAll('.num5 span');
            if (spanOld.length > 1) {
                // 移除节点
                spanOld[0].remove();
            }
            num++;
            if (num > 9) {
                num = 0;
            }
            // 增加span的元素
            var addSpan = document.createElement('span');
            addSpan.innerText = num;
            // 增加到页面上
            num5.appendChild(addSpan);
            // 获取所有的span元素
            var spans = document.querySelectorAll('.num5 span');
            spans[0].style.animation = 'moveNum2 1s forwards';
            spans[1].style.animation = 'moveNum1 1s forwards';
        }, 2000)


        // 折线1
        console.log(window);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zhexian1'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                // 值
                type: 'category',
                data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            legend: {
                data: ['今日能耗'],
                right: 100,
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                name: '今日能耗',
                data: [6, 160, 48, 45, 50, 250, 200, 180, 230, 70, 180, 55, 0],
                type: 'line',
                // type: 'bar',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        //柱状1
        console.log(window);
        var chartDom2 = document.getElementById('zhuzhuang1');
        var myChart2 = echarts.init(chartDom2);
        var option2;

        option2 = {
            xAxis: {
                type: 'category',
                data: ['5.10', '5.11', '5.12', '5.13', '5.14', '5.15', '5.16', '5.17', '5.18'],
                axisTick: false
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [55, 20, 33, 40, 21, 60, 60, 45, 60],
                type: 'bar',
                itemStyle: {
                    color: '#00A45D'
                }
            }],

        };

        myChart2.setOption(option2);

        //圆环
        console.log(window);
        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('yuanhuan'));

        // 指定图表的配置项和数据
        var option3 = {
            // 标识信息的样式
            legend: {
                orient: 'vertical',
                top: '30%',
                left: '10%',
                textStyle: {
                    color: '#fff'
                }
            },
            // 提示框
            tooltip: {},
            // 调色盘颜色列表
            color: ['#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#9DFF86', '#FEE588'],
            series: [{
                type: 'pie',
                left: '40%',
                // 高亮的样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,

                    }
                },
                // label线的样式
                label: {
                    show: true,
                    formatter(param) {
                        console.log(param);
                        // correct the percentage
                        // return param.name + ' (' + param.percent * 2 + '%)';
                        return param.percent * 2 + '%';
                    }
                },
                data: [{
                    value: 100,
                    name: '空调系统'
                }, {
                    value: 200,
                    name: '照明系统'
                }, {
                    value: 300,
                    name: '洗手间'
                }, {
                    value: 400,
                    name: '监控系统',
                }, {
                    value: 500,
                    name: '办公室'
                }, {
                    value: 600,
                    name: '管理处'
                }],
                // 圆环图
                radius: ['30%', '60%']
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);


        var lines = document.querySelectorAll('.right-bottom-middle div');
        var optionSet1 = {
            grid: {

                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        var optionSet2 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        var optionSet3 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        var optionSet4 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        var optionSet5 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false,
                splitLine: {
                    lineStyle: {
                        type: 'none'
                    }
                }
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'none'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        var optionSet6 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',
                data: [0, 6, 12, 18, 24],
                axisTick: false
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                smooth: true,
                color: '#04E38A'
            }]
        };
        echartsUtils(lines[0], optionSet1)
        echartsUtils(lines[1], optionSet2)
        echartsUtils(lines[2], optionSet3)
        echartsUtils(lines[3], optionSet4)
        echartsUtils(lines[4], optionSet5)
        echartsUtils(lines[5], optionSet6)

        //折柱混合
        var myChart4 = echarts.init(document.getElementById('zhezhu'));
        var option4;

        option4 = {
            grid: {
                bottom: '10%',
                top: '25%'
            },
            legend: {
                data: ['照明系统用电', '空调系统用电'],
                left: '10 ',
                textStyle: {
                    color: ['ffffff', 'ffffff']
                }
            },
            xAxis: [{
                type: 'category',
                data: ['5月11', '5月12', '5月13', '5月14', '5月15', '5月16', '5月17', '5月18'],
                splitLine: {
                    show: false
                }

            }],
            yAxis: [{
                type: 'value',

                min: 0,
                interval: 1000,
                splitLine: {
                    show: false
                }

            }, {
                type: 'value',

                min: 0,
                interval: 1000,
                splitLine: {
                    show: false
                }

            }],
            series: [{

                type: 'bar',

                data: [
                    2000, 3000, 1000, 1500, 2300, 4000, 2000, 3300
                ],
                itemStyle: {
                    color: '#04E38A'
                }
            }, {

                type: 'line',
                yAxisIndex: 1,
                data: [
                    2000, 3500, 1200, 2000, 1000, 2800, 2000, 1800
                ],
                itemStyle: {
                    color: '#ffff00'
                },
                smooth: true,
                symbolSize: 0
            }]
        };

        option4 && myChart4.setOption(option4);
    </script>
</body>

</html>